<template>
  <view class="custom-navbar">
    <image src="/static/other/bg-top-navebar.png" mode="widthFix"></image>
    <!-- 可以添加标题和返回按钮等内容，使其更灵活 -->
    <view class="navbar-content">
      <view class="left-section">
        <view v-if="showBack" class="back-btn" @click="handleBack">
          <image src="/static/other/left-arrow.png" mode="aspectFit"></image>
        </view>
        <view v-else class="placeholder"></view>
      </view>
      <view class="center-section" v-if="title">
        <text class="title-text">{{ title }}</text>
      </view>
      <view class="right-section">
        <!-- 占位区域，保持标题居中 -->
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		name: 'custom-navbar',
		props: {
			// 页面标题
			title: {
				type: String,
				default: ''
			},
			// 是否显示返回按钮
			showBack: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			// 处理返回事件
			handleBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.custom-navbar image {
  width: 100%;
  height: auto;
  display: block;
}

.navbar-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.left-section {
  margin-top: 80rpx;
  flex-shrink: 0;
  width: 80rpx;
}

.back-btn {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-btn image {
  width: 40rpx;
  height: 40rpx;
}

.placeholder {
  width: 80rpx;
  height: 80rpx;
}

.center-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 68rpx;
  /* 固定标题宽度，确保居中稳定 */
  max-width: 100%;
}

.right-section {
  flex-shrink: 0;
  width: 80rpx;
}

.title-text {
  color: #000;
  font-size: 32rpx;
  /* font-weight: bold; */
  text-align: center;
  /* 确保标题不会换行 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>